<template>
  <div class="login">
    <el-row>
      <el-col :xs="3" :sm="5" :md="7" :lg="8" :xl="10"><span class="invisible">1</span></el-col>
      <el-col :xs="18" :sm="14" :md="10" :lg="8" :xl="4">
        <div class="title">
          <h1>{{appName}}</h1>
        </div>
        <div class="loginBox">
          <div class="header">
            <div class="round">
              <el-button type="warning" size="mini" circle></el-button>
              <el-button type="success" size="mini" circle></el-button>
              <el-button type="danger" size="mini" circle></el-button>
              <el-button type="primary" size="mini" circle></el-button>
            </div>
          </div>
          <div class="avatarBox">
            <img src="@/assets/avtar.png" alt="avatar">
          </div>
          <div class="inputForm">
            <form>
              <div class="formGroup">
                <label class="frontLabel"><i class="iconfont icon-yonghu"></i></label>
                <input type="text" class="inputTxt" placeholder="UserName" onfocus="this.placeholder=''" onblur="this.placeholder='UserName'" v-model="loginInfo.userName">
              </div>
              <div class="formGroup">
                <label class="frontLabel"><i class="iconfont icon-mima"></i></label>
                <input type="password" class="inputTxt passwordTxt" placeholder="•••••••••" onfocus="this.placeholder=''" onblur="this.placeholder='•••••••••'" v-model="loginInfo.password">
              </div>
              <div class="btnGroup">
                <button class="loginBtn" @click.prevent="login">Login</button>
              </div>
            </form>
          </div>
        </div>
      </el-col>
      <el-col :xs="3" :sm="5" :md="7" :lg="8" :xl="10"><span class="invisible">2</span></el-col>
    </el-row>
    <div class="footer">
      <span>Copyright © 2019. {{appName}} All rights reserved.</span>
      <a class="clra" @click.prevent="visitIndex" href="#">访问主页</a>
    </div>
  </div>
</template>

<script>
  import {getToken} from '@/lib/api.js'

  export default {
    name: 'login',
    components: {
    },
    data(){
      return {
        appName: this.$store.state.appName,
        appUrl: this.$store.state.appUrl,
        loginInfo: {
          userName: '',
          password: ''
        }
      }
    },
    methods: {
      login(){
        console.log('login');
        const data = {
          r: 'Port/index',
          type: 'total',
          appkey: '5b0bb5cee5',
          v: 1,
          page:1
        };
        if(this.validateLogin()){//数据校验
          //getToken(data);
          if(this.loginInfo.userName == '123' && this.loginInfo.password == '123'){
            this.$message.success('登陆成功');
            this.$router.push({path: '/'});
          }else{
            this.$message.error('账号或密码错误');
          }
          //this.$message.error('登陆成功');
        };
      },
      validateLogin(){
        const userName = this.loginInfo.userName;
        const password = this.loginInfo.password;
        if(userName === ''){
          this.$message.error('用户名不能为空');
          return false;
        }else if(password === ''){
          this.$message.error('密码不能为空');
          return false;
        }
        return true;
      },
      visitIndex(){
        window.open(this.$store.state.appUrl);
      }
    }
  }
</script>

<style lang="scss" scoped>
.login{
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: url(../assets/loginBg.jpg) no-repeat 0px 0px;
  background-size: 100% 100%;
  .title{
    text-align: center;
    height: 100px;
  }
  .loginBox{
    border-radius: 10px;
    background-color: #2b2b36;
    .header{
      .round{
        text-align: center;
        height: 60px;
        border-radius: 10px 10px 0 0;
        background-color: #23232e;
        .el-button{
          margin-top: 20px;
          line-height: 100px;
        }
      }
    }
    .avatarBox{
      text-align: center;
      height: 160px;
      img{
        margin-top: 40px;
      }
    }
    .inputForm{
      .formGroup{
        margin: 0 auto;
        width: 95%;
        border-bottom: 1px solid#484856;
        .frontLabel{
          i{
            color: #9199aa;
            font-size: 20px;
          }
        }
        .inputTxt{
          color: #9199aa;
          outline: none;
          font-size: 18px;
          height: 60px;
          line-height: 60px;
          width: 70%;
          padding: 0 20px;
          background-color: transparent;
          border: none;
        }
        .passwordTxt{
          color: #dd3e3e;
        }
        .passwordTxt::placeholder{
          color: #dd3e3e;
        }
      }
    }
    .btnGroup{
      .loginBtn{
        cursor: pointer;
        margin-top: 50px;
        font-size: 30px;
        color: #fff;
        height: 70px;
        width: 100%;
        border-radius: 0 0 10px 10px;
        background-color: #3ea751;
        border: none;
        outline: none;
      }
      .loginBtn:hover{
        background-color: #e63a76;
        transition: 1s;
      }
    }
  }
  .footer{
    margin-top: 50px;
    color: #FFF;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    span{
      letter-spacing: 3px;
    }
    a{
      color: #e63a76;
    }
    a:hover{
      transition: 0.5s;
      color: #3ea751;
    }
  }
}
</style>